import './index.scss'
import React, { useState, useEffect, useRef } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Card, Breadcrumb, Input, message, Tooltip, Modal, Col, Row, Form, Button, Radio, DatePicker, Select, Popconfirm, Empty } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { Table, Tag, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import useMine from '@/hooks/useMine'
// import AddUser from './addUser'
import { addMineApi, MineEdit, GetMineinfo } from '@/apis/mine'
import { format } from "date-fns"


const { Option } = Select
const { RangePicker } = DatePicker
const UserList = () => { 
    //获取数据列表
    const { reqData, count, mineList, onConfirm, onPageChange, onFinish, getList } = useMine()
    //表单重置
    const [form] = Form.useForm()

    //修改数据
    const [loading, setLoading] = useState(false)
    const [open, setOpen] = useState(false)
    //数据状态
    const [userState, setUserState] = useState(false)
    //表单重置
    const [form2] = Form.useForm()

    const cardRef = useRef(null); // 获取 Card 的 DOM 元素
    const rowRef = useRef(null); // 获取 Row 的 DOM 元素
    const [tableheight, setTableHeight] = useState(0); // 存储 Row 高度
    // 获取卡片高度
    useEffect(() => {
        if (cardRef.current) {
            const Cardheight = cardRef.current.clientHeight; // 获取卡片高度
            // const Rowheight = rowRef.current.clientHeight; // 获取 Row 高度
            const height = Math.floor(Cardheight - 210)
            setTableHeight(height)
        }
    }, []);

    //显示弹窗
    // const showModal = async (id) => {
    //     setOpen(true)
    //     form2.setFieldsValue({
    //         id: '',
    //         _display_name_cn: '',
    //         _address: '',
    //         _path: '',
    //         _authentication_mode: '',
    //         workspace_id: '',
    //         report_id: '',
    //         tenant_id: '',
    //         client_id: '',
    //         client_secret: '',
    //         username: '',
    //         cipher: '',
    //         layout: ''
    //     })
    //     if (id == "") {
    //         setUserState(false)
    //     }
    //     else {
    //         setUserState(true)
    //         const res = await GetMineinfo(id)
    //         // console.log(res)
    //         form2.setFieldsValue(
    //             { ...res.data })
    //     }
    // };
    // //添加数据
    // const handleOk = async () => {
    //     try {
    //         setLoading(true)
    //         const formdata = await form2.validateFields()
    //         const { id, _display_name_cn, _address, _path, workspace_id, report_id, tenant_id, client_id, client_secret, layout } = formdata
    //         const data = { id, _display_name_cn, _address, _path, _authentication_mode: 'serviceprincipal', workspace_id, report_id, tenant_id, client_id, client_secret, username: '', cipher: '', layout }
    //         var res = ""
    //         if (id == "")
    //             //添加
    //             res = await addMineApi(data)
    //         else {
    //             //修改
    //             res = await MineEdit(data)
    //         }
    //         if (res.code == 200) {
    //             setOpen(false)
    //             getList()
    //             if (userState == true) {
    //                 message.success('修改成功')
    //             }
    //             else {
    //                 message.success('添加成功')
    //             }
    //         }
    //         else {
    //             message.error(res.message)
    //         }
    //     } catch (error) {
    //         message.error('请填写完整的表单！')
    //     }
    //     setLoading(false)
    // };
    // const handleCancel = () => {
    //     setOpen(false)
    // }

    // 准备列数据
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            hidden: true
        },
        {
            title: '用户名',
            dataIndex: 'username',
            // width: 160,
        },
        {
            title: 'Token使用量',
            dataIndex: 'token',
            // width: 160,
        },
        {
            title: '创建时间',
            dataIndex: 'create_time',
            // width: 160,
            render: (create_time) => {
                if (create_time) {
                    return format(new Date(create_time), "yyyy-MM-dd HH:mm:ss")
                }
            }
        },
        // {
        //     title: '报表名称',
        //     width: 160,
        //     dataIndex: 'display_name_cn',
        //     ellipsis: {
        //         showTitle: false,
        //     },
        //     render: (display_name_cn) => (
        //         <Tooltip styles=
        //             {{
        //                 root: {
        //                     maxWidth: '600px', // 设置最大宽度
        //                     whiteSpace: 'normal', // 允许换行
        //                 }
        //             }}
        //             placement="topLeft" title={display_name_cn}>
        //             {display_name_cn}
        //         </Tooltip>
        //     )
        // },
        // {
        //     title: 'URL',
        //     width: 300,
        //     ellipsis: {
        //         showTitle: false,
        //     },
        //     render: (datas) => (
        //         <Tooltip styles=
        //             {{
        //                 root: {
        //                     maxWidth: '600px', // 设置最大宽度
        //                     whiteSpace: 'normal', // 允许换行
        //                 }
        //             }}
        //             placement="topLeft" title={`${datas.address}${datas.path}`}>
        //             <a href={`${datas.address}${datas.path}`} target="_blank">{`${datas.address}${datas.path}`}</a>
        //         </Tooltip>
        //     )
        // },
        // {
        //     title: '认证模式',
        //     dataIndex: 'authentication_mode',
        //     width: 120,
        //     render: (authentication_mode) => {
        //         if (authentication_mode?.toLowerCase() == "serviceprincipal") {
        //             return '服务主体'
        //         }
        //         else if (authentication_mode?.toLowerCase() == "masteruser") {
        //             return "主用户"
        //         }
        //         else {
        //             return ""
        //         }
        //     }
        // },
        // {
        //     title: '工作区ID',
        //     dataIndex: 'workspace_id',
        //     ellipsis: {
        //         showTitle: false,
        //     },
        //     render: (workspace_id) => (
        //         <Tooltip styles=
        //             {{
        //                 root: {
        //                     maxWidth: '600px', // 设置最大宽度
        //                     whiteSpace: 'normal', // 允许换行
        //                 }
        //             }}
        //             placement="topLeft" title={workspace_id}>
        //             {workspace_id}
        //         </Tooltip>
        //     ),
        // },
        // {
        //     title: '报表ID',
        //     dataIndex: 'report_id',
        //     ellipsis: {
        //         showTitle: false,
        //     },
        //     render: (report_id) => (
        //         <Tooltip styles=
        //             {{
        //                 root: {
        //                     maxWidth: '600px', // 设置最大宽度
        //                     whiteSpace: 'normal', // 允许换行
        //                 }
        //             }}
        //             placement="topLeft" title={report_id}>
        //             {report_id}
        //         </Tooltip>
        //     )
        // },
        // {
        //     title: '创建时间',
        //     dataIndex: 'ceate_time',
        //     width: 160,
        //     render: (ceate_time) => {
        //         if (ceate_time) {
        //             return format(new Date(ceate_time), "yyyy-MM-dd HH:mm:ss")
        //         }
        //     }
        // },
        // {
        //     title: '修改时间',
        //     dataIndex: 'update_time',
        //     width: 160,
        //     render: (update_time) => {
        //         if (update_time) {
        //             return format(new Date(update_time), "yyyy-MM-dd HH:mm:ss")
        //         }
        //     }
        // },
        // {
        //     title: '操作',
        //     width: 134,
        //     render: data => {
        //         return (
        //             <Space size="middle">

        //                 <Button type="primary" shape="circle" onClick={() => showModal(`${data.id}`)} icon={<EditOutlined />} />
        //                 <Popconfirm
        //                     title="删除报表"
        //                     description="确定要删除当前报表吗?"
        //                     onConfirm={() => { onConfirm(data.id) }}
        //                     // onCancel={cancel}
        //                     okText="是"
        //                     cancelText="否"
        //                     key={2}
        //                 >
        //                     <Button
        //                         type="primary"
        //                         danger
        //                         shape="circle"
        //                         icon={<DeleteOutlined />}
        //                     />
        //                 </Popconfirm>
        //             </Space>
        //         )
        //     }
        // }
    ]

    return (
        <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '使用记录' },
                    ]} />
                }
                style={{ marginBottom: 10}}
            >
                <Form initialValues={{ authentication_mode: '' }} form={form} onFinish={val => onFinish(val)}>
                    <Row gutter={24}>
                        {/* <Col span={6} key={1}>
                            <Form.Item label="报表名称" name="display_name_cn">
                                <Input placeholder="" />
                            </Form.Item>
                        </Col> */}
                        <Col span={10} key={2}>
                            <Form.Item label="添加时间" name="ceate_time">
                                <RangePicker locale={locale}></RangePicker>
                            </Form.Item>
                        </Col>
                        {/* <Col span={6} key={4}>
                            <Form.Item label="地址" name="address">
                                <Input placeholder="" />
                            </Form.Item>
                        </Col>
                        <Col span={6} key={5}>
                            <Form.Item label="路径" name="path">
                                <Input placeholder="" />
                            </Form.Item>
                        </Col> */}
                        <Col span={7} key={6}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    筛选
                                </Button>
                                <Button style={{ marginLeft: "20px" }} htmlType="Reset" >
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <div style={{ height: "100%", overflow: "hidden" }}>
                <Card title={`根据筛选条件共查询到 ${count} 条结果：`} ref={cardRef} style={{ tableLayout: "fixed", height: "100%", padding: '10px' }}>
                    {/* <AddUser getList={getList} /> */}
                    {/* <Row justify="start" className='RowPadd' ref={rowRef}>
                        <Col >
                            <Button onClick={() => showModal("")} type="primary">添加</Button>
                        </Col>
                    </Row> */}
                    {/* <Modal
                        open={open}
                        title={userState ? "修改报表" : "'添加报表"}
                        onOk={handleOk}
                        onCancel={handleCancel}
                        width={840}
                        centered={true}
                        footer={[
                            <Button type="primary" key="submit" loading={loading} onClick={handleOk}>
                                {userState ? "修改" : "添加"}
                            </Button>,
                            <Button
                                type="primary"
                                key="close"
                                onClick={handleCancel}
                            >
                                关闭
                            </Button>,
                        ]}
                    >
                        <div style={{ padding: "18px", paddingBottom: "5px" }}>
                            <Form form={form2} initialValues={{ permission: 0 }} >
                                <Row gutter={24}>
                                    <Col span={18} key={1}>
                                        <Form.Item label="id" name="id" hidden={true} >
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={2}>
                                        <Form.Item label="报表名称" name="_display_name_cn" rules={[{ required: true, message: '请输入报表名称', },]}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={3}>
                                        <Form.Item label="地址" name="_address" rules={[{ required: true, message: '请输入地址', },]}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={4}>
                                        <Form.Item label="路径" name="_path" rules={[{ required: true, message: '请输入路径', },]}>
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={11} key={5}>
                                        <Form.Item label="认证模式" name="_authentication_mode" rules={[{ required: true, message: '请选择认证模式', },]}>
                                            <Radio.Group>
                                                <Radio value={'serviceprincipal'}>服务主体</Radio>
                                                <Radio value={'masteruser'}>主用户</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Col> 
                                    <Col span={15} key={6}>
                                        <Form.Item label="布局" name="layout" rules={[{ required: true, message: '请选择布局', },]}>
                                            <Radio.Group>
                                                <Radio value={'0'}>普通版</Radio>
                                                <Radio value={'1'}>大屏版</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Col>
                                    <Col span={12} key={7}>
              
                                        <Form.Item label="工作区ID" name="workspace_id">
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12} key={8}>
     
                                        <Form.Item label="报表ID" name="report_id">
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12} key={9}>

                                        <Form.Item label="租户ID" name="tenant_id">
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12} key={10}>
                                        <Form.Item label="客户端ID" name="client_id">
                                            <Input placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={11}>
    
                                        <Form.Item label="客户端机密" name="client_secret">
                                            <Input.Password size="large" placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={12}>
                                        <Form.Item label="Power BI用户名" name="username">
                                            <Input.Password size="large" placeholder="" />
                                        </Form.Item>
                                    </Col>
                                    <Col span={18} key={13}>
                                        <Form.Item label="Power BI密码" name="cipher">
                                            <Input.Password size="large" placeholder="" />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </Modal> */}
                    <Table
                        rowKey="id"
                        columns={columns}
                        dataSource={mineList}
                        scroll={{ y: tableheight }}
                        locale={{
                            emptyText: (
                                <Empty
                                    image={Empty.PRESENTED_IMAGE_SIMPLE} // 使用 Ant Design 提供的简约图标
                                />
                            )
                        }}
                        pagination={{
                            total: count,
                            pageSize: reqData.MaxResultCount,
                            onChange: onPageChange
                        }} />
                </Card>
            </div>
        </div>
    )
}

export default UserList